<template>
  <div>
    <el-collapse :value="['1','2']">
      <el-collapse-item title="推荐活动" name="1">
        <div class="m-dataList">
          <el-table
            :data="dataList"
            style="width: 100%"
            v-loading="dataListLoading"
            element-loading-text="loading..."
            ref="dataList"
            max-height="400"
          >
            <el-table-column
              prop="account_no"
              width="160"
              label="被推荐人客户账号">
            </el-table-column>
            <el-table-column
              prop="approve_time"
              label="开户时间"
              :formatter="countTimeFormat"
              width="160">
            </el-table-column>
            <el-table-column
              prop="deposit_gts2_time"
              label="激活时间"
              :formatter="countTimeFormat"
              min-width="160">
            </el-table-column>
          </el-table>
          <div class="m-pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes=pagination.pageSizeList
              :current-page=pagination.pageNo
              :page-size=pagination.pageSize
              layout="total, sizes, prev, pager, next"
              :total=pagination.total>
            </el-pagination>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="营销系统活动" name="2">
        <The-Active type="1" form="trade"></The-Active>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import TheActive from '@/views/LeadDetailsDemo/components/TheDemoActive.vue'
  import * as RealaccountAPI from '@/Api/realaccount'
  import * as Utils from '@/utils'
  export default {
    name: 'TheAccountDetailsActivity',
    data () {
      return {
        pagination: Utils.commonPagination(),
        dataList: [],
        dataListLoading:false,
      }
    },
    props:['type'],
    computed: {
      queryId(){
        return this.$route.params.id.split('_')[1]
      }
    },
    components: {
      TheActive,
    },
    methods: {
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      handleCurrentChange(index) {
        this.pagination.pageNo = index;
        this.queryList();

      },
      queryList(){
          this.dataListLoading = true;
        if (this.$refs.dataList) {
          this.$refs.dataList.bodyWrapper.scrollTop = 0;
        }
        RealaccountAPI.realaccountInfo2_2_1({
          queryId: this.queryId,
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.pageNo-1
        })
          .then(res => {
            this.dataListLoading = false;
            if (res.code != '0') {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return
            }
            this.dataList = res.data.content;
            this.pagination.total = res.data.totalElements;
          })
          .catch(error => {
            this.dataListLoading = false;
            console.log(error)
          })
      },
      countTimeFormat(row, column){
        return Utils.countDateTimeFormat(row[column.property])
      },
    },
    created(){
      this.queryList();
    }
  }
</script>

<style scoped lang="scss">
</style>
